<template>
  <div ref="chinaMapBox" style="width: 100%; height: 100%"></div>
</template>


<script setup>
import * as echarts from "echarts";
import "../assets/china.js";
import { ref, onMounted, watch } from "vue";

const chinaMapBox = ref(null);

const myProps = defineProps({
  mapArrData: {
    type: Array,
    required: true
  }
});

const emit = defineEmits(['province-click'])

// 监听数据变化
watch(
  () => myProps.mapArrData,
  (newVal) => {
    if (newVal && newVal.length > 0) {
      updateChart();
    }
  },
  { deep: true }
);

let myChart = null;
let option = ref(null);

const teaRegions = {
  '浙江省': '江南茶区',
  '福建省': '江南茶区',
  '安徽省': '江南茶区',
  '江西省': '江南茶区',
  '湖南省': '江南茶区',
  '湖北省': '江南茶区',
  '江苏省': '江南茶区',
  '广东省': '华南茶区',
  '广西壮族自治区': '华南茶区',
  '海南省': '华南茶区',
  '台湾省': '华南茶区',
  '四川省': '西南茶区',
  '贵州省': '西南茶区',
  '云南省': '西南茶区',
  '西藏自治区': '西南茶区',
  '河南省': '江北茶区',
  '陕西省': '江北茶区',
  '甘肃省': '江北茶区',
  '山东省': '江北茶区'
};

const teaTypesMap = {
  '浙江省': ['绿茶', '黄茶'],
  '福建省': ['乌龙茶', '红茶', '白茶'],
  '安徽省': ['绿茶', '黄茶'],
  '江西省': ['绿茶', '红茶'],
  '湖南省': ['黑茶', '黄茶'],
  '湖北省': ['绿茶', '红茶'],
  '江苏省': ['绿茶'],
  '广东省': ['乌龙茶', '红茶'],
  '广西壮族自治区': ['黑茶', '红茶'],
  '海南省': ['红茶'],
  '台湾省': ['乌龙茶', '红茶'],
  '四川省': ['绿茶', '黄茶'],
  '贵州省': ['绿茶', '红茶'],
  '云南省': ['普洱茶', '红茶'],
  '西藏自治区': ['藏茶'],
  '河南省': ['绿茶'],
  '陕西省': ['绿茶'],
  '甘肃省': ['绿茶'],
  '山东省': ['绿茶']
};

const updateChart = () => {
  if (!myProps.mapArrData || !myProps.mapArrData.length) return

  option.value = {
    backgroundColor: "#001432",
    series: [
      {
        type: 'map',
        mapType: 'china',
        label: {
          normal: {
            show: false,
            color: '#000'
          },
          emphasis: {
            show: true,
            color: 'red'
          }
        },
        data: myProps.mapArrData,
        name: '总计人数',
        emphasis: {
          itemStyle: {
            areaColor: '#389BB7',
            borderWidth: 0
          }
        },
        select: {
          itemStyle: {
            areaColor: '#389BB7',
            borderWidth: 0
          }
        }
      }
    ],
    visualMap: {
      left: 'center',
      bottom: '5%',
      min: 0,
      max: Math.max(...myProps.mapArrData.map(item => item.value)),
      inRange: {
        color: ['#ffffff', '#FF7500', '#CB3A56', '#9D2933']
      },
      show: true,
      orient: 'horizontal',
      text: ['高', '低'],
      textStyle: {
        color: '#fff'
      },
      calculable: true,
      itemWidth: 20,
      itemHeight: 200,
      padding: [5, 0, 5, 0]
    },
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        const value = params.value || 0;
        const province = params.name;
        const teaRegion = teaRegions[province] || '非主要产茶区';
        const teaTypes = teaTypesMap[province] || [];
        return `${province}<br/>
                人数：${value}人<br/>
                产茶区：${teaRegion}<br/>
                盛产茶型：${teaTypes.join('、')}`;
      },
      position: function (point, params, dom, rect, size) {
        // 鼠标右侧显示tooltip
        return [point[0] + 10, point[1] - 30];
      }
    }
  };

  if (myChart) {
    myChart.setOption(option.value)
    myChart.off('click')
    myChart.on('click', (params) => {
      console.log('地图点击:', params.name)
      emit('province-click', params.name)
    })
  }
};

onMounted(() => {
  myChart = echarts.init(chinaMapBox.value, "dark", {
    renderer: "canvas",
    useDirtyRect: false,
  });

  if (myProps.mapArrData && myProps.mapArrData.length > 0) {
    updateChart();
  }

  window.addEventListener("resize", myChart.resize);
});
</script>

<style>
</style>